<template>
    <div class="table">
        <el-table :data="tableData" :empty-text="BaseConfig.emptyText" cell-class-name="pp" header-cell-class-name="pp">
            <el-table-column label="#" type="index"/>
            <el-table-column label="名称" prop="goodsName"/>
            <el-table-column label="库存" prop="number">
                <template #default="scope">
                    <el-text v-if="scope.row.number >= 50">{{ scope.row.number }}</el-text>
                    <el-text v-else type="danger">{{ scope.row.number }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="规格" prop="specification"/>
            <el-table-column label="图片">
                <template #default="scope">
                    <el-avatar :size="50" :src="`/api/images/${scope.row.picture}`"/>
                </template>
            </el-table-column>
            <el-table-column label="类型" prop="typeName"/>
            <el-table-column label="入库时间">
                <template #default="scope">
                    {{ dealDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button v-show="info.bool" link type="primary" @click="getClaim(scope.row)">
                        申请物资
                    </el-button>
                    <div v-show="!info.bool">
                        <el-button link type="primary" @click="handleClick(scope.row)">
                            修改
                        </el-button>
                        <el-popconfirm :title="`确定要删除${scope.row.name}的数据吗？`" cancel-button-text="取消"
                                       confirm-button-text="确定"
                                       @confirm="deleteClick(scope.row.goodsId)">
                            <template #reference>
                                <el-button link type="danger">
                                    删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </div>

                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="page">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="gtotal"
                hide-on-single-page
                layout="total, prev, pager, next"
                @current-change="handleCurrentChange"
        />
    </div>
  <!--申请物资弹出框-->
    <div class="dialog">
        <el-dialog v-model="dialogVisible" align-center width="20%" @closed="handleClose">
            <div class="dialogForm">
                <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" hide-required-asterisk
                         label-position="left"
                         label-width="100px">
                    <el-divider content-position="left">
                        物资概要
                    </el-divider>
                    <el-form-item label="物资名称">
                        <el-text>{{ dialogForm.goodsName }}</el-text>
                    </el-form-item>
                    <el-form-item label="物资库存">
                        <el-text>{{ dialogForm.number }}</el-text>
                    </el-form-item>
                    <el-divider content-position="center">
                        物资申领
                    </el-divider>
                    <el-form-item class="tt" label="申请数量" prop="claimNumber">
                        <el-input-number v-model="dialogForm.claimNumber" :min="1" style="width: 60%"/>
                    </el-form-item>
                    <el-form-item class="tt" label="需求人" prop="uname">
                        <el-input v-model="dialogForm.uname" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item class="tt" label="备注">
                        <el-input v-model="dialogForm.remark" :placeholder="BaseConfig.defaultText" maxlength="200"
                                  show-word-limit
                                  style="width: 100%"
                                  type="textarea"/>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitDialogForm(dialogFormRef)">
          提交
        </el-button>
      </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
// OK 2023-4-23 20:48:志愿者申请物资功能
import { onBeforeMount, onUnmounted, ref } from 'vue'
import { BaseConfig } from '@/config/config'
import GoodsService from '@/api/goodsApi'
import { GoodDtos, Type } from '@/ts/type/Goods'
import { dealDate } from '@/utils/commonUtils'
import { EventBus } from '@/utils/mitt'
import { Message, Notification } from '@/plugins/element'
import { useStaff } from '@/store'
import { storeToRefs } from 'pinia'
import { ClaimDto } from '@/ts/type/Claim'
import { rules } from '@/config/formConfig'
import { FormInstance } from 'element-plus'
import ClaimService from '@/api/claimApi'

const dialogVisible = ref<boolean>(false)
const Staff = useStaff()
const { info } = storeToRefs(Staff)
const searchBool = ref<boolean>(false)
const tableData = ref<GoodDtos[]>([])
const currentPage = ref<number>(1)
const pageSize = ref<number>(8)
const gtotal = ref<number>(0)
const form = ref<Type>({})
const dialogForm = ref<ClaimDto>({ claimNumber: 1 })
const dialogFormRef = ref<FormInstance>()

const getClaim = (row: GoodDtos) => {
  dialogForm.value.goodsName = row.goodsName
  dialogForm.value.number = row.number
  dialogForm.value.goodsId = row.goodsId
  dialogVisible.value = true
}
const handleClose = () => {
  dialogForm.value = { claimNumber: 1 }
}

// 获取物资列表数据
const getAllInfo = () => {
  GoodsService.getAllInfo(currentPage.value, pageSize.value).then(res => {
    console.log(res)
    const { total, list } = res.data
    tableData.value = list
    gtotal.value = total
  })
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  if (searchBool.value) query()
  getAllInfo()
}

const deleteClick = (id: number) => {
  GoodsService.deleteById(id).then(res => {
    const { data } = res
    Notification.success(data)
    getAllInfo()
  })
}

// 监听up组件的数据
EventBus.on('searchType', res => {
  searchBool.value = res
  if (!res) getAllInfo()
})
EventBus.on('searchTypeForm', res => {
  form.value = res
  query()
})

// 模糊查询
const query = () => {
  GoodsService.postQuery(currentPage.value, pageSize.value, form.value).then(res => {
    const { total, list } = res.data
    tableData.value = list
    gtotal.value = total
  })
}

const handleClick = (row: GoodDtos) => {
  const { goodsId } = row
  EventBus.emit('updateGoods', { bool: false, goodsId: goodsId as number })
}

const submitDialogForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid && dialogForm.value.claimNumber as number > 0) {
      ClaimService.postClaimDto(dialogForm.value).then(res => {
        const { data } = res
        Notification.success(data)
        dialogVisible.value = false
      })
    } else {
      Message.error('请正确输入内容')
    }
  })
}

// 页面加载数据时进行数据获取
onBeforeMount(() => {
  getAllInfo()
})
// 销毁当前页面的事件总线
onUnmounted(() => {
  EventBus.off('updateGoods')
})
</script>

<style lang='scss' scoped>
:deep(.pp ) {
  text-align: center;
}

.page {
  margin: 15px auto 0;
}

.dialogForm {
  padding: 0 20px;

  .el-form-item {
    margin-bottom: 0;
    line-height: 1.5em;
  }
}

:deep(.el-dialog) {
  .el-dialog__body {
    padding: 0;
  }
}

.tt {
  margin: 20px 0;
}
</style>